<!-- 拼伞 -->
<template>
  <div class="run">
    <NavBar :fnTitle="title"></NavBar>

    <!-- 信息展示 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="info_show">
        <div class="photo">
          <img
            src="https://gitee.com/xiao-ershi/img/raw/master/%E5%9B%BE%E5%B1%82%2012%20%E6%8B%B7%E8%B4%9D.png"
            alt=""
          />
        </div>
        <div class="top">
          <p class="meet">你会遇到Ta吗？</p>
        </div>
        <div class="bottom">
          <div class="getloca">选择拼伞位置</div>
          <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
          </van-dropdown-menu>
          <button class="btn" @click="GetUmbrella">点击拼伞</button>
        </div>
      </div>

      <van-loading v-if="showloading" type="spinner" color="#1989fa" vertical />

      <!-- 匹配成功 -->
      <van-dialog v-model="show" title="详细信息" show-cancel-button>
        <van-field v-model="showpeople.account" label="账户" readonly />
        <van-field v-model="showpeople.email" type="email" label="邮箱" readonly />
        <van-field v-model="showpeople.name" type="name" label="名字" readonly />
        <van-field v-model="showpeople.phone" type="phone" label="电话" readonly />
        <van-field v-model="showpeople.school" type="school" label="学校" readonly />
        <van-field v-model="showpeople.created_at" type="created_at" label="开始时间" readonly />
        <van-field v-model="showpeople.updated_at" type="updated_at" label="结束时间" readonly />
      </van-dialog>
    </van-pull-refresh>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import Vue from 'vue'
import { Dialog } from 'vant'
Vue.use(Dialog)

import { Toast } from 'vant'
export default {
  data() {
    return {
      title: '拼伞',
      tableData: [],
      showpeople: [],
      location: '',
      show: false,
      showloading: false,

      // 下拉刷新
      count: 0,
      isLoading: false,

      // 下拉框
      value1: 0,
      option1: [
        { text: 'D3', value: 0 },
        { text: 'D5', value: 1 },
        { text: 'C3', value: 2 }
      ]
    }
  },
  components: {
    NavBar,
    [Dialog.Component.name]: Dialog.Component
  },
  methods: {
    // 获取所有人显示
    GetAll() {
      window.location.reload()
      return
    },

    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
        this.count++
        this.GetAll()
      }, 1000)
    },

    // 是否确定拼伞
    doit() {
      this.$dialog
        .alert({
          title: '拼伞', // 加上标题
          message: '确认拼伞？', // 改变弹出框的内容
          showCancelButton: true // 展示取消按钮
        })
        .then(() => {
          // 点击确认按钮后的调用
          this.GetUmbrella()
        })
        .catch(() => {
          // 点击取消按钮后的调用
          // console.log("点击了取消按钮噢")
        })
    },
    // 拼伞
    async GetUmbrella() {
      this.showloading = true
      var val = this.value1
      if (val === 0) {
        val = 'D3'
      }
      if (val === 1) {
        val = 'D5'
      }
      if (val === 2) {
        val = 'C3'
      }

      console.log(val)
      const { data: res } = await this.$http({
        method: 'post',
        url: '/api/umbrella/umbrellaluck',
        data: this.$qs.stringify({
          // 这里是发送给后台的数据
          location: val
        })
      })
      // console.log(res)
      // console.log(res.data.length );
      // console.log(this.showpeople )
      if (res.code !== 200) {
        // console.log(res)
        return
      }

      if (res.data.length === 0) {
        // console.log(res)
        this.showloading = false
        alert('目前没有人在此处')
        return
      }
      // console.log(res)
      alert('匹配成功')
      this.showpeople = res.data[0]
      // console.log(res)
      this.getshow()
    },
    // 展示详细信息
    getshow() {
      this.showloading = false
      this.show = true
    }
  }
}
</script>

<style scoped>
.getloca {
  padding: 3% 0;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.photo {
  position: relative;
  left: 45%;
  margin-bottom: -35px;
  background-color: white;
  border-radius: 50px;
  padding-bottom: 2px;
  width: 40px;
  height: 30px;
  text-align: center;
}
.info_show {
  width: 80%;
  margin: 0 auto;
  margin-top: 10%;
}
.top {
  height: 2.666667rem;
  background-color: rgb(243, 133, 60);
}
.bottom {
  background-color: rgba(218, 218, 218, 0.247);
  text-align: center;
  height: 50%;
}
.btn {
  margin: 5% 0;
  border: 0.026667rem solid #fff;
  border-radius: 0.533333rem;
  background-color: rgb(243, 133, 60);
  color: #fff;
  width: 30%;
  height: 1rem;
}
.meet {
  padding-top: 15%;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  text-align: center;
}
.show {
  margin-top: 0.4rem;
}
</style>
